<template>
	<div>
		<bread-crumb class="bread-crumb-padding" :list="breadCrumb" :user="true"></bread-crumb>
		<div class="user-main-box">
			<accountTabList :list="tablist" :cidList="cidList" :cidSelect="cidSelect"
				@cidSelectChange="cidSelectChange"></accountTabList>
			<div class="tips-area" style="margin: 20px 0">
				温馨提示：请勿与他人分享您的账户信息，确保您的交易安全。如因用户自身原因导致的账户被盗或损失，平台不承担任何责任
			</div>
			<div class="form-input-area">
				<div class="flx-row-s-c div-line">
					<div class="flx-row-s-c">
						<div class="long-name">
							可提现金额
						</div>
						<span class="c-o" style="font-size: 28px;margin-right: 5px;">{{ cidList[cidSelect].balance }}</span><span class="c-black">元</span>
						<router-link to="/user/cashout" style="margin-left: 20px;">我要提现</router-link>
					</div>
				</div>
				<div class="flx-row-s-c div-line">
					<div class="long-name">冻结金额</div>
					<span class="c-g" style="font-size: 18px;margin-right: 5px;">{{ cidList[cidSelect].freeze }}</span><span class="c-black">元</span>
				</div>
				<div class="flx-row-s-c div-line">
					<div class="flx-row-s-c">
						<div class="long-name">可用金额</div>
						<span class="c-b" style="font-size: 18px;margin-right: 5px;">{{ cidList[cidSelect].balance }}</span><span class="c-black">元</span>
					</div>
				</div>
				<recharge></recharge>
				<!-- <div v-if="cidSelect === 0" class="flx-row-s-c">
					<router-link to="/user/recharge" class="user-strong-button submit-button-style"
						style="margin: 0 30px 0 145px">充值</router-link>
					<router-link to="/user/cashout" class="user-normal-button submit-button-style">提现</router-link>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getAccountInfoChild,
	} from "@/api/user";
	import accountTabList from "@/components/tabList/accountTabList";
	import recharge from "./recharge2.vue";
	export default {
		name: "VipAccountIndex",
		components: {
			accountTabList,
			recharge
		},
		data() {
			return {
				loading: false,

				breadCrumb: [{name: "管理中心"},{
					name: "财务管理"
				}, {
					name: "账户信息"
				}],
				tablist: [{
					name: "账户明细",
					to: "/user/tmsell",
				}, ],
				cidSelect: 0,
				cidList: [{
					username: '主账号',
					balance: 0,
					freeze: 0,
				}],
				userId: null
			};
		},
		created() {
			this.getCidList();
		},
		methods: {
			// 获取子账号
			async getCidList() {
				const {
					code,
					data
				} = await getAccountInfoChild();
				if (code == 200) {
					this.cidList = data
					this.cidList.forEach((item) => {
						if (item.isChild === 0) {
							item.username = '主账号'
						}
					})
				}
			},
			cidSelectChange(row) {
				this.cidSelect = row.index;
				this.userId = row.id;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.long-name{
		width: 100px;
    text-align: right;
		padding-right: 12px;
		margin-right: 0;
		font-size: 14px;
	}

	.form-input-area{
		padding: 0;
	}

</style>
